<template>
    <div>

        <el-row :gutter="10">

            <el-col :span='6'>

                <Assembly

                        :drag2='drag2'
                        :data='types'
                        :bigid='bigid'
                        @addcom='addcom'
                        @setcom='setcom'
                        @setdrag='setdrag'
                        @deletecom='deletecom'
                        @additem="additem"
                        @setitem="setitem"
                        @reset='reset'
                        @clickitemid="clickitemid"
                       />
            </el-col>
            <el-col :span='12'>
                <!-- <Forms
                        ref='forms'
                        :fromData='data'
                        :formsetting='formsetting'
                        :drag1='drag1'
                        :drag2='drag2'
                        :com='com'
                        @setdrag='setdrag'
                        @reset='reset'
                        @setdelcom='setdelcom'
                        @addcom='addcom'
                        @jiaohuan='jiaohuan'
                        @setformcom='setformcom'
                        @setdialogVisible='setdialogVisible'
                        @save='save'
                        @qingkong='qingkong'
                        @downloadvue='downloadvue'
                /> -->
                <newForms
                :newitems="newitems"
                :itemid="itemid"
                 @save='save'
                 :idsarr="huixianids"
               >
                </newForms>
            </el-col>
            <el-col :span="6">
                <AttrFrom
                        :fields='fields'
                        :form='formcom'
                        :formsetting='formsetting'
                        :drag2='drag2'
                        @deletecom='deletecom'
                />
            </el-col>
        </el-row>
        <el-dialog
                title="预览表单"
                v-if='dialogVisible'
                :visible.sync="dialogVisible"
                width="70%"
                :before-close="handleClose">
            <ShowFrom :data='{formsetting:formsetting,forms:data}'/>
        </el-dialog>
    </div>
</template>

<script>
    import Bus from '@/utils/eventBus.js'
    import dow from './dow'
    // import Assembly from './assembly'
    import Assembly from './assemblyEx'
    // import Forms from './forms'
    import newForms from "./newforms.vue"
    import AttrFrom from './attributeform'
    import ShowFrom from './ShowForms'
    import { mapState, } from 'vuex';

    export default {
        name: 'auditdesign',
        components: {
            Assembly, newForms,AttrFrom, ShowFrom
        },
        computed: {
           ...mapState(['bigidarr'])
        },
        props: {
            idsarr:{
              type: Array,
              default: () => {
                  return []
              }
            },
            items: {
                type: Array,
                default: () => {
                    return []
                }
            },
            formdata: {
                type: Object
            },
            fields: {
                type: Array,
                default: () => {
                    return [
                        {label: '姓名', value: 'name'},
                        {label: '年龄', value: 'age'},
                    ]
                }
            }
        },
        watch:{
          idsarr(val){
            this.huixianids=val
            console.log('回显',this.huixianids)
          },
          items(val){
            this.items=val
            this.newitems=this.items
            // console.log('拿id',this.items)
            this.getlist()
          },
          formdata(val){
            this.formdata=val
            this.getlist()
          }
        },

        data() {
            return {
                // 是否正在拖动左侧的组件 1 没有动  2 已经拖动没有进入中间的界面  3拖动进入中间的页面 4 进入设计页面中的组件
                drag1: '1',
                // 是否正在拖动中间的组件 1 没有动  2 已经拖动没有进度其他组件  3 进入其他组件
                drag2: '1',
                // 左边 被操作的组件
                com: {},
                // 中间正在被拖动的组件的 如果拖动到垃圾桶 将会删除它
                delcom: {},
                // 表单列表
                data: [],
                // 表单设置
                formsetting: {
                    labelPosition: 'left',
                    labelwidth: 80,
                    formsize: 'small'
                },
                // 中间被点击的组件
                formcom: {
                    showFrom: [],
                    rules: []
                },
                dialogVisible: false,
                types: [],
                ids:[],
                bigid:[],
                index:null,
                newitems:[],//最终的
                // 点击的item id
                itemid:null,
                huixianids:[],//用来回显的ids




            };
        },
         created() {
          this.getlist()
           this.getxiugai()



        },
        mounted() {
        },

        methods: {
          // 拿点击的item id
          clickitemid(v){
            this.itemid=v

          },


          getxiugai(){
              Bus.$on('itemid',l=>{
                this.index=l

                this.setitem(this.index)
              })
          },
          getlist(){
            this.newitems=this.items
            // console.log('每项',this.newitems)
            // 当传入props 值时 设置进入当前的data
            if (this.formdata && this.formdata.formsetting && this.formdata.forms) {
                this.formsetting = this.formdata.formsetting
                this.data = this.formdata.forms

            }

            this.types=[]
              console.log('选择的',this.items)
            for (let i = 0; i < this.items.length; i++) {
                this.types.push(this.items[i].type)
                let tmpIds = []
                this.items[i].data.forms.forEach(item => {
                    tmpIds.push(item.key)
                })
                this.ids.push(tmpIds)
            }
             // console.log('type',this.types)
            // console.log('auditDesign2', this.ids)
          },
            // 左边的全部重置 左边的结束拖动时调用
            reset() {
                this.drag1 = '1'
                this.drag2 = '1'
                // 重置中间的横线
                this.$refs.forms.chonzhihxindex()
            },
            // 预览的 对话框
            setdialogVisible() {
                this.dialogVisible = true
            },
            handleClose() {
                this.dialogVisible = false
            },
            // 设置拖动状态
            setdrag(data) {
                this[data.type] = data.value
            },
            // 设置操作的组件
            setcom(data) {

                this.com = data
            },
            setdelcom(data) {
                this.delcom = data
            },
            setformcom(data) {
                this.formcom = data

            },

            // 清空
            qingkong() {
                this.data = []
                this.formcom = {
                    showFrom: [],
                    rules: []
                }
            },
            // 删除
            deletecom() {
                if (typeof this.formcom.parent === 'undefined') {
                    return
                }
                for(var i=0;i<this.items.length;i++){
                    for(var c=0;c<this.items[i].data.forms.length;c++)
                    if(this.delcom.id===this.items[i].data.forms[c].id){
                      this.$store.dispatch('del_item',this.items[i].type.id)

                    }

                  }

                let index = parseInt(this.formcom.parent)
                // console.log('auditDesign.deletecom, 2', this.ids)
                this.ids[index].forEach(val => {
                    // console.log('deletecom****, 3', val)
                    // 如果删除的是 被选中的 则把 选中的也清空
                    if (this.delcom.id === val) {
                        this.formcom = {
                            showFrom: [],
                            rules: []
                        }
                    }
                    this.data = this.data.filter(item => item.id !== val)
                })
                // 如果删除的是 被选中的 则把 选中的也清空
                if (this.delcom.id === this.formcom.id) {
                    this.formcom = {
                        showFrom: [],
                        rules: []
                    }

                }
                this.data = this.data.filter(item => item.id !== this.delcom.id)

            },
            // 增加一个组件
            addcom(index = -1) {
                if (index == -1) {
                    this.data.push(this.com)
                } else {
                    this.data.splice(index, 0, this.com)
                }
            },

            setitem(index) {
              this.bigid=[]
              this.bigid.push(this.items[index].type.id)
                this.formsetting = this.items[index].data.formsetting


                this.items[index].data.forms.forEach(item => {
                    item.parent = index

                    this.data.push(item)
                })


            },
            additem(index = -1) {

            },
            // 交换位置
            jiaohuan(start, end) {
                let arr = this.data
                // JSON.parse(JSON.stringify(this.data))
                let aa = arr[start]
                arr[start] = arr[end]
                arr[end] = aa
                this.data = arr
            },
            save(data) {

                this.$emit('save', {idarr:data.idarr})

            },
            // 下载
            download(filename, text) {
                let element = document.createElement('a');
                element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
                element.setAttribute('download', filename);
                element.style.display = 'none';
                document.body.appendChild(element);
                element.click();
                document.body.removeChild(element);
            },
            downloadvue() {
                let filename = 'hello.vue'
                let text = dow(this.formsetting, this.data)
                // console.log(text)
                this.download(filename, text)
            }
        }
    }
</script>

<style>
</style>
